<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>map</title>
    <link rel="stylesheet" href="main1119.css"/>
    <script type="text/javascript" src="qwebchannel.js"></script>
    <script type="text/javascript" src="transform.js"></script>
    <script src="es5.min.js"></script>
    <script src="maps.js"></script>
    <script type="text/javascript" src="addToolbar.js"></script>
    <script type="text/javascript">

        function showAlert()
		{
			alert('this is web alert');
        }


        window.onload = function ()
        {
            window.marker_list = [];     // 记录地图上marker
            window.point_list = [];      // 记录点的信息，point = {lon:,lat:,alt:,state:}
            window.plane_marker = undefined;
            window.plane_line = undefined;
            window.route_line = undefined;

            window.runway_side1 = undefined; //跑道线，边线1
            window.runway_mid = undefined;//跑道线，中线
            window.runway_right = undefined;//跑道线，边线2

            window.sec_runway_side1 = undefined; //第二条跑道线，边线1
            window.sec_runway_mid = undefined;//第二条跑道线，中线
            window.sec_runway_right = undefined;//第二条跑道线，边线2
            new QWebChannel(qt.webChannelTransport, function (channel)
            {
                var interactObj = channel.objects.interactObj;

                //更新飞机位置
                interactObj.SigToWebPlaneLoc.connect(function (lon, lat, yaw)
                {
                    var gcj = window.wgs2gcj(lat, lon);
                    if (window.plane_marker == undefined)
                    {
                        window.map.setCenter([gcj.lng, gcj.lat]);
                        window.plane_marker = new AMap.Marker({
                            map: window.map,
                            icon: "img/plane.png",
                            offset: {x:-11, y:-11}
                        });

                        window.plane_line = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#00FF6C", //"#3366FF", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 5,        //线宽
                            strokeStyle: "solid",   //线样式
                            strokeDasharray: [10, 5] //补充线样式
                        });
                    }

                    var path = window.plane_line.getPath();
                    path.push([gcj.lng, gcj.lat])
                    window.plane_line.setPath(path);
                    window.plane_marker.setPosition([gcj.lng, gcj.lat]);
                    window.plane_marker.setAngle(yaw);
                });

                // 添加航点到地图
                interactObj.SigToWebAddRoutes.connect(function (l) {
                    clearAllRoutes();

                    for (var i = 0; i < l.length; i++)
                    {
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        addOneRoute(i, [gcj.lng, gcj.lat]);
                        window.point_list.push({lat: l[i].lat, lon: l[i].lon, alt: l[i].alt, state: l[i].state})
                    }
                });

                // 添加跑道信息到地图
                interactObj.SigToWebUpdateRunWay.connect(function (l) {
                    if (window.runway_side1 == undefined)
                    {
                        window.runway_side1 = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#FFF200", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 3,        //线宽
                            strokeStyle: "solid",   //线样式
                        });
                    }
                    if (window.runway_side2 == undefined)
                    {
                        window.runway_side2 = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#FFF200", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 3,        //线宽
                            strokeStyle: "solid",   //线样式
                        });
                    }
                    if (window.runway_mid == undefined)
                    {
                        window.runway_mid = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#FFF200", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 2,        //线宽
                            strokeStyle: "dashed",  //线样式
                        });
                    }

                    {
                        window.runway_side1.setPath([])
                        var path = window.runway_side1.getPath();
                        var i = 0;
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])
                        i = 1;
                        gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])                        
                        window.runway_side1.setPath(path);
                    }
                    {
                        window.runway_side2.setPath([])
                        var path = window.runway_side2.getPath();
                        var i = 2;
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])
                        i = 3;
                        gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])                        
                        window.runway_side2.setPath(path);
                    }
                    {
                        window.runway_mid.setPath([])
                        var path = window.runway_mid.getPath();
                        var i = 4;
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])
                        i = 5;
                        gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])                        
                        window.runway_mid.setPath(path);
                    }


                });
                interactObj.SigToWebUpdateSeondRunWay.connect(function (l) {
                    if (window.sec_runway_side1 == undefined)
                    {
                        window.sec_runway_side1 = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#FFF200", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 3,        //线宽
                            strokeStyle: "solid",   //线样式
                        });
                    }
                    if (window.sec_runway_side2 == undefined)
                    {
                        window.sec_runway_side2 = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#FFF200", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 3,        //线宽
                            strokeStyle: "solid",   //线样式
                        });
                    }
                    if (window.sec_runway_mid == undefined)
                    {
                        window.sec_runway_mid = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#FFF200", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 2,        //线宽
                            strokeStyle: "dashed",  //线样式
                        });
                    }

                    {
                        window.sec_runway_side1.setPath([])
                        var path = window.sec_runway_side1.getPath();
                        var i = 0;
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])
                        i = 1;
                        gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])                        
                        window.sec_runway_side1.setPath(path);
                    }
                    {
                        window.sec_runway_side2.setPath([])
                        var path = window.sec_runway_side2.getPath();
                        var i = 2;
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])
                        i = 3;
                        gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])                        
                        window.sec_runway_side2.setPath(path);
                    }
                    {
                        window.sec_runway_mid.setPath([])
                        var path = window.sec_runway_mid.getPath();
                        var i = 4;
                        var gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])
                        i = 5;
                        gcj = window.wgs2gcj(l[i].lat, l[i].lon);
                        path.push([gcj.lng, gcj.lat])                        
                        window.sec_runway_mid.setPath(path);
                    }


                });
                // 设置地图视角中心显示航线
                interactObj.SigToWebToFitView.connect(function () {
                    if (window.point_list.length > 0)
                    {
                        var gcj = window.wgs2gcj(window.point_list[0].lat, window.point_list[0].lon);
                        window.map.setCenter([gcj.lng, gcj.lat]);
                    }
                });

                // 设置地图视角中心
                interactObj.SigToWebSetCenter.connect(function (lon_deg,lat_deg) {
                    var gcj = window.wgs2gcj(lat_deg, lon_deg);
                    window.map.setCenter([gcj.lng, gcj.lat]);
                });

                // 清除轨迹线
                interactObj.SigToWebClearTrace.connect(function () {
                    if (window.plane_line != undefined)
                    {
                        var path = window.plane_line.getPath();
                        var last = path[path.length - 1];
                        window.plane_line.setPath([last]);
                    }
                });

                // 接收到获取鼠标位置请求
                // interactObj.SigToWebClearTrace.connect(function () {
                //     // var event = event || window.event;
                //     // if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
                //     //     x = event.offsetX;
                //     //     y = event.offsetY;
                //     // } else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
                //     //     x = event.layerX;
                //     //     y = event.layerY;
                //     // }
                //     var x = 0
                //     var y = 0
                //     var str = "当前鼠标位置：(" + x + " "+ y +")"
                //     alert(str)
                // });
                var clearAllRoutes = function () {

                    for (var i = 0; i < window.marker_list.length; i++)
                    {
                        window.marker_list[i].setMap(null);
                    }
                    window.marker_list = [];
                    window.point_list = [];
                    if (window.route_line != undefined)
                    {
                        window.route_line.setPath([])
                    }
                };

                var addOneRoute = function (index, pos) {
                    if (window.route_line == undefined)
                    {
                        window.route_line = new AMap.Polyline({
                            path: [],          //设置线覆盖物路径
                            map:window.map,
                            strokeColor: "#3366FF", //线颜色
                            strokeOpacity: 1,       //线透明度
                            strokeWeight: 3,        //线宽
                            strokeStyle: "solid",   //线样式
                            strokeDasharray: [10, 5] //补充线样式
                        });
                    }

                    var path = window.route_line.getPath();
                    path.push(pos)
                    window.route_line.setPath(path);

                    var marker = new AMap.Marker({
                                position:pos,
                                map:window.map,
                                draggable:true,
                                raiseOnDrag:false,
                                offset: {x:-13, y:-13},
                                content: '<div style="width:22px;height:22px;line-height:22px;border-radius:100%;background:red;background: #2AA7DC;border: 2px solid #FFFFFF;box-shadow: 0 0 4px 0 rgba(0,0,0,0.50);text-align:center;font-size: 12px;color: #FFFFFF;letter-spacing: 0;">' + (index + 1) + '</div>'
                            });
                    marker.on('click', function () {
                        interactObj.web_editroute(index)
                    });
                    marker.on('dragend', function () {
                        var wgs = window.gcj2wgs(marker.getPosition().lat, marker.getPosition().lng);

                        var path = window.route_line.getPath();
                        path[index] = [marker.getPosition().lng, marker.getPosition().lat];
                        window.route_line.setPath(path);

                        var point = window.point_list[index];
                        point.lat = wgs.lat;
                        point.lon = wgs.lng;
                        window.point_list[index] = point;
                        interactObj.web_updateroute(index, point.lon, point.lat, point.alt, point.state);
                    });
                    window.marker_list.push(marker)
                };

                var mapclick = function (p) {
                    addOneRoute(window.marker_list.length, p.lnglat);
                    var wgs = window.gcj2wgs(p.lnglat.getLat(), p.lnglat.getLng())
                    interactObj.web_addroute(wgs.lng, wgs.lat)
                    window.point_list.push({lon: wgs.lng, lat:wgs.lat, alt:0, state:0})
                };
                //鼠标移动时根据鼠标位置获取经纬度
                window.map.on('mousemove', function(p) {
                    var wgs = window.gcj2wgs(p.lnglat.getLat(), p.lnglat.getLng())
                    x = wgs.lng;
                    y = wgs.lat;
                    // var str = "(" + x + " "+ y +")"
                    interactObj.web_on_mouseMove(x, y);
                    // alert(x + " " + y); // e is an event object (MouseEvent in this case)
                });
                
                window.map.on('complete', function(p) {
                    interactObj.web_finishload();
                });
                
                interactObj.SigToWebEnableClick.connect(function (enable)
                {
                    if (enable)
                    {
                        window.map.on('click', mapclick)
                    }
                    else
                    {
                        window.map.off('click', mapclick)
                    }
                });
            });
        }

    </script>
</head>
<body>
<div id="container"></div>

<script>

    window.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:16,
        center: [118.7730431, 31.8279821],
        layers: [
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ]
    });
</script>
</body>
</html>